<template>
  <div class="calendar-table">
    <el-tabs size="mini" type="card" :style="{background:'#F5F4F7'}" @tab-click="tabclicks">
      <el-tab-pane label="会计期间">
        <el-table
          ref="table"
          :key="tableKey"
          v-loading="listLoading"
          :header-cell-style="{background:'#F5F4F7'}"
          :data="list"
          border
          fit
          stripe
          highlight-current-row
          style="width: 100%;"
          :default-sort="{prop: 'strfundsourcecode', order: 'ascending'}"
        >
          <el-table-column
            type="index"
            width="60"
            label="序号"
            align="center"
          >
            <template v-slot="scope">
              {{ scope.$index+ 1 }}
            </template>
          </el-table-column>
          <el-table-column label="期间" min-width="130px" prop="strperiod">
            <template slot-scope="scope">
              <span>{{ scope.row.strperiod }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strstartdate }}</span>
            </template>
          </el-table-column>

          <el-table-column label="结束日期" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strenddate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.blnisinactive }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="季度">
        <el-table
          ref="table"
          :key="tableKey"
          v-loading="listLoading"
          :header-cell-style="{background:'#F5F4F7'}"
          :data="quarterList"
          border
          fit
          stripe
          highlight-current-row
          style="width: 100%;"
          :default-sort="{prop: 'strfundsourcecode', order: 'ascending'}"
        >
          <el-table-column
            type="index"
            width="60"
            label="序号"
            align="center"
          >
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="季度" min-width="130px" prop="strperiod">
            <template slot-scope="scope">
              <span>{{ scope.row.strperiod }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始期间" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strstartperiod }}</span>
            </template>
          </el-table-column>

          <el-table-column label="结束期间" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strendperiod }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strstartdate }}</span>
            </template>
          </el-table-column>

          <el-table-column label="结束日期" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strenddate }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="半年">
        <el-table
          ref="table"
          :key="tableKey"
          v-loading="listLoading"
          :header-cell-style="{background:'#F5F4F7'}"
          :data="yearList"
          border
          fit
          stripe
          highlight-current-row
          style="width: 100%;"
          :default-sort="{prop: 'strfundsourcecode', order: 'ascending'}"
        >
          <el-table-column
            type="index"
            width="60"
            label="序号"
            :resizable="false"
            align="center"
          >
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="半年" min-width="130px" prop="strperiod">
            <template slot-scope="scope">
              <span>{{ scope.row.strperiod }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始期间" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strstartperiod }}</span>
            </template>
          </el-table-column>

          <el-table-column label="结束期间" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strendperiod }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strstartdate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束日期" min-width="130px">
            <template slot-scope="scope">
              <span>{{ scope.row.strenddate }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
// import calculateTableHeight from '@/layout/mixins/calculateCommonTableHeight'
import { getYearList } from '@/api/system/global-setting/calendar'
export default {
  name: 'CalendarSettingTableArea',
  // mixins: [calculateTableHeight],
  data() {
    return {
      list: [],
      tableKey: 0,
      listLoading: false,
      searchFrom: {},
      paging: {
        total: 100,
        page: 1,
        size: 10
      },
      quarterList: [],
      yearList: [],
      tabkey: 1
    }
  },
  created() {
    this.queryListByPage()
  },
  methods: {
    tabclicks(value) {
      this.tabkey = Number(value.index) + 1
      this.queryListByPage()
    },
    queryListByPage() {
      this.listLoading = true
      const tool = this.$parent.$parent.$refs['FilterTool']
      if (tool.whereArr !== '') {
        getYearList(
          tool.whereArr,
          this.tabkey
        ).then(res => {
          if (res.code === 20000) {
            if (this.tabkey === 1) {
              this.list = res.data
            }
            if (this.tabkey === 2) {
              this.quarterList = res.data
            }
            if (this.tabkey === 3) {
              this.yearList = res.data
            }
          }
          this.listLoading = false
        }).catch(res => {
          this.listLoading = false
        })
      } else {
        this.list = []
        this.quarterList = []
        this.yearList = []
        this.listLoading = false
      }
    }
  }
}
</script>
<style>
.calendar-table  .el-table{
    margin-top: 20px
}
.calendar-table  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background: #00A99D;
  color:#fff
}
.calendar-table .el-tabs__content {
  background: #fff;
  margin-bottom: 0px;
}
.calendar-table .el-tabs__header {
  margin: 0px;
}
</style>

